<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 第三种:添加after伪元素 */
        /* .clearfix:after {
            content: "";
            display: block;
            height: 0;
            clear: both;
            visibility: hidden;
        }
        .clearfix {
            *zoom: 1;
        } */

        第四种：双伪元素
        .clearfix:before,
        .clearfix:after {
            content: "";
            display: table;
        }
        .clearfix:after {
            clear:both;
        }
        .clearfix {
            *zoom: 1;
        }
        .box1 {
            /* 第二种：在浮动元素的父标签添加overflow: hidden;可以清除浮动 */
            /* overflow: hidden; */
            width: 1000px;
            margin: 0 auto;
            background-color: black;
        }
        .box1 .damao {
            float: left;
            width: 300px;
            height: 200px;
            background-color: pink;
        }
        .box1 .ermao {
            float: left;
            width: 200px;
            height: 100px;
            background-color: grey;
        }
        .box2 {
            background-color: blue;
            width: 1000px;
            height: 300px;
            margin: 0 auto;
        }
        .clear {
            clear: both;
        }
    </style>
</head>
<body>
    <!-- 第三种、第四种需要在class后面加上clearfix的类名class="box1 clearfix" -->
    <div class="box1 clearfix">
        123
        <div class="damao"></div>
        <div class="ermao"></div>
        <!-- 第一种：在浮动元素末尾加一个标签，里面含有clear: both，且这个标签必须是块级元素 -->
        <!-- <div class="clear"></div> -->
    </div>
    <div class="box2"></div>
</body>
</html>